<template>

	<view class="container"> <!-- 页面-->
		<view v-if="isLogin">
			<image class="headicon" :src="'http://localhost:8090'+userinfo.icon"></image>
			<view class="text-area">
				<text class="title">{{userinfo.name}}</text>
			</view>
		</view>
		<view v-if="!isLogin">
			<image class="headicon" :src="userinfo.icon"></image>
			<view class="text-area">
				<button type="primary" size="mini" @click="toLogin">点击登录</button>
			</view>
		</view>

		<view style="width: 100%;"> <!--底部容器-->

			<view class="entries"> <!--入口容器-->

				<view class="entry"> <!--入口项-->

					<text class="entry_text">个人信息</text> <!--入口项文字-->

					<image class="entry_arrow" src="/static/more.png" style="width: 50px; height: 50px;"></image>
					<!--入口图标-->

				</view>

				<view class="entry"><text class="entry_text">订单列表</text>

					<image class="entry_arrow" src="/static/more.png" style="width: 50px; height: 50px;"></image>

				</view>

				<view class="entry"><text class="entry_text">修改密码</text>

					<image class="entry_arrow" src="/static/more.png" style="width: 50px; height: 50px;"></image>

				</view>

				<view class="entry"><text class="entry_text">意见反馈</text>

					<image class="entry_arrow" src="/static/more.png" style="width: 50px; height: 50px;"></image>

				</view>

			</view>

			<button type="primary" style="margin: 0 20px;" :disable='!isLogin' @click="logout">退出</button> <!--按钮-->

		</view>

	</view>

</template>



<script>
	export default {

		data() {

			return {
				userinfo: {
					userId: null,
					icon: '',
					name: '',
					username: null
				},
				isLogin: false

			}

		},

		onShow() {
			this.getUserInfo()
		},

		onLoad() {



		},

		methods: {
			// tc(){
			// 	uni.navigateTo({
			// 		url:'/pages/login/login'
			// 	})
			// },
			logout() {
				uni.setStorageSync('userinfo', null)
				this.getUserInfo()
			},
			toLogin() {
				uni.navigateTo({
					url: './login'
				})
			},
			getUserInfo() {
				let userinfo = uni.getStorageSync('userinfo')
				if (userinfo) {
					this.userinfo = userinfo
					this.isLogin = true
				} else {
					this.userinfo.username = null
					this.userinfo.nickname = null
					this.userinfo.icon = '../../static/my.png'
					this.isLogin = false
				}
			}
		}

	}
</script>



<style>
	.container {

		display: flex;
		/*设置容器为弹性布局容器*/

		flex-direction: column;
		/*内部组件主轴从上到下排布*/

		align-items: center;
		/*内部组件交叉轴水平居中*/

		width: '100%';

		padding-top: 10%;



	}

	.entries {

		width: '90%';

		padding: 20px
	}

	.entry {

		width: '90%';

		display: flex;

		flex-direction: row;

		align-items: center;

		height: 50px;

		justify-content: space-between;
		/*两端对齐*/

		border-top: 1px solid #CCC;

	}

	.entry:last-child {

		border-bottom: 1px solid #CCC;

	}

	.entry text {

		font-size: 20px;

	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.headicon {
		height: 200rpx;
		width: 200rpx;
		margin-top: 80rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
		border-radius: 50%;
	}
</style>